<template>
  <div style="height:calc(100% - 50px)">
      <div style="padding-bottom:50px">
    <x-header :left-options="{backText: ''}" title="项目">
      <div slot="right">
        <group title="double columns">
          <popup-picker title="title2" :data="list2" v-model="value2"></popup-picker>
        </group>    
      </div>
    </x-header>
    <div style="display:flex;margin-top:10px;align-items:center">
    <simple-search @onSearch="search" :placeholder="'输入名称搜索'" style="width:85%;margin-left:3%">
    </simple-search>
    <img src="@/assets/img/map.png" class="mapModel" @click="map"/>  
    </div>
    <div class="main-container" style="height:calc(100% - 50px)">
      <!-- <scroller :on-refresh="refresh" :on-infinite="infinite"> -->
        <div>
          <div v-for="(item, i) in projectList" :key="i" class="card" @click="openInfo(item)">
            <div class="num">
              <div class="gray-label">{{item.PROJECTNAME}}</div>
              <div>
                <span class="projectDate">{{item.STARTDATE.substring(0,7)}}~</span>
                <span class="projectDate">{{item.FINISHDATE.substring(0,7)}}</span>
              </div>
            </div>
          </div>
        </div>
    </div>
    <router-view style="height:100%;"></router-view>
    </div>
  </div>
</template>

<script>
import {PopupPicker,Group } from 'vux'
export default {
  name: "projectList",
  components: {
    PopupPicker,
    Group
  },
  mounted () { 
    this.getProjects()
  },
  data () {
    return {
      projectList: [],
      newList: [],
      page: 1,
      keyword: '',
      createPop: false,//弹出层是否创建
      loading: false,//下拉刷新时禁止无限加载
      list2:[['','小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你'], ['','小米1', 'iPhone2', '华为3', '情怀4', '三星5', '其他6', '不告诉你7'],['','小米1', 'iPhone2', '华为3', '情怀4', '三星5', '其他6', '不告诉你7']],
      value2:[],
    }
  },
  methods: {
    //获取项目信息
    getProjects() {
      this.projectList = [];
      let prjName = this.keyword == '' ? "default" : this.keyword
      let user = this.$store.state.user
      //console.log(user)
      let params = {
        
        FixJSON: {
          _method: "component.getListData",
          _param: {
            bizObj : "SYS_PROJECTINFO",
            service : "selectMore",
            fields : "*",
            filter : "IsDelete=0 and PROJECTID<>0",
            currentPageIndex:this.page,
            pageSize:"50",
            orderList:[{
              field : "CREATEDATE",
              order : "desc"
            }],
            QueryFormData : ""
          }
        },
        cookies: ''
      }
      let paramsMD5 = {
        
        FixJSON: '{"_method": "component.getListData","_param": {"bizObj" : "SYS_PROJECTINFO","service" : "selectMore",'+
            '"fields" : "*",'+
            '"filter" : "IsDelete=0 and PROJECTID<>0",'+
            '"currentPageIndex":' + this.page + ','+
            '"pageSize":"9999",'+
            '"orderList":[{'+
              '"field" : "CREATEDATE",'+
              '"order" : "desc"'+
            '}],'+
            '"QueryFormData" : ""}}',
        cookies: ''
      }
      //params = JSON.stringify(params)
      this.$ajax({
        url: this.COMMON_URL, //+ '?_objName=SYS_PROJECTINFO&_viewId=SYS_PROJECTINFO_list', 
        method: 'post',
        data : paramsMD5
      }).then(res => {
        console.log(res)
        this.projectList = [...res.data.datas]
        //console.log(this.projectList)
      })
    },
    search(val) {
      // this.page = 1;
      this.keyword = val;
      this.getSearchProjects()
    },
    getSearchProjects(){
      this.projectList = []
      var params = '{"_method":"component.getListData","_param":{"bizObj":"SYS_PROJECTINFO","service":"mySelectMore","fields":"*","filter":"IsDelete=0 and PROJECTNAME like \'%'+this.keyword+'%\' and PRJCATEGORY like \'%%\' and  1=1 ","currentPageIndex":1,"pageSize":9999,"orderList":[{"field":"CREATEDATE","order":"desc"}],"QueryFormData":{"LABEL_PROJECTNAME":"项目名称","PROJECTNAME":"'+this.keyword+'","LABEL_PRJDEPTNAME":"建设性质","PRJCATEGORY":""}}}'
      this.$ajax({
        url : this.COMMON_URL ,//+ '?_objName=SYS_PROJECTINFO&_viewId=projectSelectList',
        method : 'post',
        data : {
          FixJSON : params
        }
      }).then(res=>{
        //console.log(res)
        this.projectList = res.data.datas
      })
    },
    openInfo(item){
      this.$router.push({
        path : '/projectInfo/projectInfo',
        name : 'projectInfo',
        params : {
          item :item
        }
      })
    },
    map(){
      this.$router.push({
        path:'map',
        name:'map',
      })
    }
  },
  computed: {
  },
  watch: {
    '$route' (newR, oldR) {
      if(this.$store.state.needRefresh){
        this.refresh()
        this.$store.commit("needRefreshStatus",false)
      }
    },
    value2(newVal,oldVal){
      console.log("value2",newVal)
    }

  }
}
</script>

<style scoped>
  .card {
    background: #fff;
    /* margin: 10px 16px; */
    margin: 0px 16px;
    padding: 3px 10px 10px 10px;
    /* padding: 10px; */
    /* border-radius: 4px; */
    overflow: hidden;
    border-bottom: 1px solid #F5F5F5;
    display: flex;
  }
  .gray-label {
    color: #191919;
    font-size: 16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    width: 100%;
  }
  .active{
    background: #242B80;
    color: #fff;
  }
  .title{
    display: flex;
    align-items: center;
    font-size: 16px
  }
  .bar{
    width: 3px;
    height: 13px;
    background: #A7AEFF;
    margin-right: 13px;
  }
  .num{
    /* display: flex; */
    font-size: 14px;
    color: #343434;
    /* margin-left: 16px; */
    /* margin-top: 14px; */
    justify-content: space-between;
    align-items: center
  }
  .projectDate{
    font-size:12px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:#afafaf;
    line-height:20px;
  }
  /* .content /deep/ .vux-header{
    background-color: #ffffff !important;
  } */
  .transition-view  .vux-header /deep/ .vux-header-left .left-arrow:before{
    border: none !important;
  } 
  /* .transition-view .vux-header /deep/ .vux-header-title{
        color: #262A34;
  } */
   .moa-search-div /deep/ .moa-search-button{
    display: none;
  }
  .mapModel{
    width: 25px;
    height: 25px;
    margin-left: auto;
    margin-right: auto;
  }
  .moa-search-div:after{
    border-bottom : none !important;
  }
  /* .moa-search-div /deep/ .moa-search-bar{
    background-color : #f5f5f5 !important;
  } */
  .moa-search-div /deep/ .moa-search-bar:after{
    border:none;
    background: #f5f5f5 !important;
  }
</style>
